<template>
  <div>
    <template>
      <!--页头组件-->
      <el-page-header style="background-color: #0095d7;color: white;line-height: 60px"
                      @back="goBack" content="增加物资页面"></el-page-header>
      <!--分割线-->
      <el-divider></el-divider>
      <!--name代表上传文件时 文件的参数名
          limit="1" 设置只能选择一张图片
      -->
      <el-card>
        <el-form :model="item" :rules="rules" ref="ruleForm">

          <el-form-item prop="name" label="物资名称" label-width="80px">
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item label="物资图片" label-width="80px">
            <el-upload
                    action="http://176.17.10.223:18081/item/upload"
                    name="picFile"
                    :limit="1"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-success="handleSuccess"
                    :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item prop="description" label="描述" label-width="80px">
            <el-input v-model="item.description"></el-input>
          </el-form-item>
          <el-form-item prop="inventory" label="库存" label-width="80px">
            <el-input v-model="item.inventory"></el-input>
          </el-form-item>
          <el-form-item prop="requireApplication" label="申请条件 " label-width="80px">
            <el-input v-model="item.requireApplication"></el-input>
          </el-form-item>
          <el-form-item prop="isEnable" label="状态" label-width="80px">
            <template>
              <el-select v-model="item.isEnable" placeholder="请选择">
                <!--:label控制下拉选选项的文本内容 :value代表提交的值-->
                <el-option v-for="c in isEnableArr"
                           :label="c.name"
                           :value="c.isEnable">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-form>
        <el-button @click="add()">提交</el-button>
      </el-card>
    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        isEnable:'',
        item:{
          name:"",
          img:"",
          description:"",
          inventory:"",
          requireApplication:"",
        },
        isEnableArr:[{name:'启用',isEnable:1},{name:'禁用',isEnable:0}],
        rules: {
          name: [
            { required: true, message: '请输入物资名称', trigger: 'blur' },
            { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入物资描述', trigger: 'blur' },
          ],
          inventory: [
            { required: true, message: '请输入物资存量', trigger: 'blur' },
          ],
          requireApplication: [
            { required: true, message: '请输入身份物资申请条件', trigger: 'blur' },
          ],
        }
      }
    },

    methods: {
      add(){
        let url = 'http://176.17.10.223:18081/item/add-new'
        let data = 'name=' + this.item.name +
                "&img=" + this.item.img +
                '&description=' + this.item.description +
                '&inventory=' + this.item.inventory +
                '&requireApplication=' + this.item.requireApplication ;
        console.log("data------" + data)
        this.axios.post(url,data).then((response)=> {
          this.user = response.data.data;
          let message = response.data.message;
          if (message == null){
            console.log(response.data)
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            // 提交之后返回到用户管理页面
            this.$router.push({path: '/admin/manage/item/info'});  //页面路由刷新
          }else {
            console.log(message);
            this.$message.error(message);
          }
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        //当点击删除图片时方法会执行
        //file代表要删除的文件
        //file.response代表文件上传成功时 服务器响应的数据(文件名)
        console.log("文件名="+file.response);
        //http://176.17.10.223:8080/remove?name=xxx.jpg
        let url = "http://176.17.10.223:18081/item/remove"
        let data = 'name=' + file.response;
       this.axios.post(url,data).then((response) => {
          console.log("服务器图片已经删除")
        })
      },
      handleSuccess(response,file,fileList){
        //response=file.response
        console.log("文件上传完成, 图片名="+response);
        this.item.img = response;
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      goBack(){
        //返回上一页面
        history.back();
      }
    },
  }
</script>
<style>
  .el-input__inner {
    width: 500px;
  }
  .el-card{
    width: 100%;
    height: 100%;
  }
</style>